<template>
  <div class="app">
    <div class="citylist">
      <div class="NavHeader_navBar">
        <div class="am-navbar-left">
          <van-icon name="arrow-left" @click="onClickLeft" />
        </div>
        <div class="am-navbar-title">城市选择</div>
        <div class="am-navbar-right"></div>
      </div>

      <van-index-bar :index-list="NewCityList">

        <div v-for="(item, index) in CityList" :key="index" >
          <van-index-anchor :index="item.name">{{
            item.name
          }}</van-index-anchor>
          <van-cell
            v-for="(item2, index2) in item.cont"
            @click="$router.push(`/lookhouse/?value=${item2.value}&name=${item2.label}`)"
            :key="index2"
            :title="item2.label"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { getCityList } from '@/api-ajax/house.js'

export default {
  data () {
    return {
      CityList: [],
      NewCityList: [],
      indexList: [
        '#',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      valueObj: {}

    }
  },

  async created () {
    const { data } = await getCityList()
    console.log(data)
    // console.log(data.body[0].short.toUpperCase())
    this.indexList.forEach((item) => {
      const cont = data.body.filter(
        (item2) => item2.short.substring(0, 1).toUpperCase() === item
      )

      // console.log(cont) // 每一项 有城市的数据

      if (cont.length < 1) return
      this.NewCityList.push(item)
      this.CityList.push({
        name: item,
        cont: cont
      })
    })
  },

  methods: {
    onClickLeft () {
      this.$router.back()
    }

  }

}
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
  touch-action: pan-y;
}
.citylist {
  padding-top: 45px;
  position: relative;
  height: 100%;
  font-size: 14px;
  line-height: 1.15;
  .van-index-bar__sidebar {
    .van-index-bar__index {
      font-size: 20px;
    }
  }
  .van-index-anchor {
    font-size: 20px;
  }
  .van-cell {
    font-size: 20px;
    line-height: 50px;
  }

  .NavHeader_navBar {
    position: fixed;
    z-index: 2;
    top: 45px;
    left: 0;
    margin-top: -45px;
    background-color: #f6f5f6;
    display: flex;
    align-items: center;
    height: 45px;
    // background-color: #108ee9;
    color: #333;
    display: flex;
    width: 100%;
    .am-navbar-left {
      padding-left: 15px;
      flex: 1 1;
      display: flex;
      align-items: center;
      height: 100%;
      font-size: 18px;
    }
    .am-navbar-title {
      justify-content: center;
      font-size: 18px;
      white-space: nowrap;
      flex: 1 1;
      height: 100%;
      display: flex;
      align-items: center;
    }
    .am-navbar-right {
      flex: 1 1;
      justify-content: flex-end;
      font-size: 16px;
      margin-right: 15px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
